<!DOCTYPE html>
<html>
<head>
    <title>聊天机器人</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>DeepSeek聊天机器人</h1>
            <div class="buttons-container">
                <button id="tools-toggle" class="tools-toggle-button">显示工具选择</button>
                <button id="direct-tools-toggle" class="tools-toggle-button">直接调用工具</button>
                <button id="build-tool-toggle" class="builder-toggle-button">构建自定义工具</button>
            </div>
        </header>
        
        <div class="main-content">
            <!-- 工具选择面板 -->
            <div id="tools-panel" class="tools-panel hidden">
                <h3>可用工具选择</h3>
                <p>选择要在对话中使用的工具：</p>
                <div id="tools-list" class="tools-list">
                    <!-- 工具列表将通过JavaScript动态加载 -->
                </div>
            </div>
            
            <!-- 直接调用工具面板 -->
            <div id="direct-tools-panel" class="tools-panel hidden">
                <h3>直接调用工具</h3>
                <p>您可以直接调用以下工具，无需通过对话：</p>
                <div id="direct-tools-container" class="direct-tools-container">
                    <!-- 工具卡片将通过JavaScript动态加载 -->
                </div>
            </div>
            
            <!-- 工具构建面板 -->
            <div id="tool-builder-panel" class="tools-panel hidden">
                <h3>构建自定义工具</h3>
                <p>在这里创建您自己的前端工具：</p>
                
                <div class="tool-form">
                    <div class="input-group">
                        <label for="tool-name">工具名称：</label>
                        <input type="text" id="tool-name" placeholder="例如：天气查询" required>
                    </div>
                    
                    <div class="input-group">
                        <label for="tool-description">工具描述：</label>
                        <input type="text" id="tool-description" placeholder="例如：查询指定城市的天气情况" required>
                    </div>
                    
                    <div class="parameters-container">
                        <label>参数列表：</label>
                        <div id="parameters-list">
                            <!-- 参数项将在这里动态添加 -->
                        </div>
                        <button id="add-parameter" class="add-param-button">添加参数</button>
                    </div>
                    
                    <div class="code-editor">
                        <label for="tool-code">工具实现代码：</label>
                        <textarea id="tool-code" placeholder="// 在这里编写JavaScript代码来实现您的工具功能
// 例如：
function executeToolFunction(parameters) {
  // 处理参数并执行逻辑
  const result = '您的工具结果';
  return { result };
}
"></textarea>
                    </div>
                    
                    <button id="save-tool" class="save-tool-button">保存工具</button>
                </div>
                
                <div id="frontend-tools-list" class="tools-list">
                    <h4>已创建的前端工具：</h4>
                    <!-- 前端工具列表将通过JavaScript动态加载 -->
                </div>
            </div>
            
            <!-- 聊天界面 -->
            <div id="chat-container"></div>
            <div id="input-container">
                <input type="text" id="message-input" placeholder="输入消息...">
                <button id="send-button">发送</button>
            </div>
        </div>
    </div>
    
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html> 